<template>
	<div>
		<div class="test-class">
			<h1>测试VUE——01</h1>
			<p class="p_class">{{ username }}</p>
			<button @click="chengeUserName" >修改用户名</button>
			<p>来自Left Vue的传值为{{num}}</p>
			<button @click="showMyCountMyInput01" >显示MyCount中的输入框</button>
		</div>
		

		
		<div class="box">
			<!-- 使用props传参时，前面加:(v-bind)则双引号里是js写法，不加则是html写法 -->
			<!-- 在此处加:之后，传参类型为数值 -->
			<Left   :p_init="123" :info="v_info" @numChange="getNum"></Left>
			<Rright></Rright>
		</div>
		<MyCount ref="MyCount"></MyCount>
		<Arr></Arr>
	</div>
</template>

<script>
	import app_Left from '@/components/LRC/left.vue'
	import Rright from '@/components/LRC/right.vue'
	//默认导出，固定写法
	export default{
		name:'lrc',
		// data数据源
		// 组件中的data必须是一个函数
		data(){
			//在return中定义数据
			return{
				username:'缺省用户名',
				v_info:{
					id:123,
					name:999
				},
				num:0
				
			}
		},
		methods:{
			chengeUserName(){
				this.username='Hello';
			},
			getNum(val){
				this.num=val;
			},
			showMyCountMyInput01(){
				//通过给组件添加ref属性，调用其方法
				this.$refs.MyCount.showMyInput01();
			}
		},
		//注册私有子组件
		components:{
			//两种写法
			'Left'    :  app_Left,
			Rright
		}
	}
</script>

<!-- style标签默认使用css，可以显式表名为lang="less" -->
<style lang="less" scoped>
	.test-class{
		background-color: blue;
	}
	.box {
	  display: flex;
	}
	// “/deep/” 用于css穿透，与scoped一起使用，加此标签的css会穿透给子元素，但也不会影响兄弟元素
	// 当使用第三方组件库时，需要修改其默认样式会用到
	/deep/ p{
		color: peru;
	}
</style>